import Divider from '../index';
import Typography from "../../typography/index"
import { IconAdd as IconFileImage, IconHistoryFilling as IconUser, IconFilterFilling as IconPen } from '../../icon';
const { Paragraph, Title, Text } = Typography;
const orientations = ['left', 'center', 'right'];
import "./index.css"

const App = () => {
    return (
        <>
            <div className='divider-demo'>
                <Paragraph>
                    A design is a plan or specification for the construction of an object.
                </Paragraph>
                <Divider />
                <Paragraph>
                    A design is a plan or specification for the construction of an object.
                </Paragraph>
                <Divider
                    style={{
                        borderBottomStyle: 'dashed',
                    }}
                />
                <Paragraph>
                    A design is a plan or specification for the construction of an object.
                </Paragraph>
                <Divider
                    style={{
                        borderBottomWidth: 2,
                        borderBottomStyle: 'dotted',
                    }}
                />
                <Paragraph>
                    A design is a plan or specification for the construction of an object.
                </Paragraph>
            </div>
            <div
                className='divider-demo'
                style={{ marginTop: 48 }}
            >
                <div className='divider-demo-flex-content'>
                    <span className='avatar'>
                        <IconFileImage />
                    </span>
                    <div className='content'>
                        <Title heading={6}>Image</Title>May 4, 2010
                    </div>
                </div>
                <Divider className='half-divider' />
                <div className='divider-demo-flex-content'>
                    <span className='avatar'>
                        <IconUser />
                    </span>
                    <div className='content'>
                        <Title heading={6}>Avatar</Title>May 4, 2010
                    </div>
                </div>
                <Divider className='half-divider' />
                <div className='divider-demo-flex-content'>
                    <span className='avatar'>
                        <IconPen />
                    </span>
                    <div className='content'>
                        <Title heading={6}>Icon</Title>May 4, 2010
                    </div>
                </div>
            </div>
        </>
    );
};
const App2 = () => {
    return (
        <>
            <Paragraph>A design is a plan or specification for the construction of an object.</Paragraph>
            <Divider orientation={orientations[0]}>Text</Divider>
            <Paragraph>A design is a plan or specification for the construction of an object.</Paragraph>
            <Divider orientation={orientations[1]}>Text</Divider>
            <Paragraph>A design is a plan or specification for the construction of an object.</Paragraph>
            <Divider orientation={orientations[2]}>Text</Divider>
        </>
    )
}
const App3 = () => {
    return (
        <div className='divider-demo'>
            <Text>Item 1</Text>
            <Divider type='vertical' />
            <Text>Item 2</Text>
            <Divider type='vertical' />
            <Text>Item 3</Text>
        </div>
    )
}
export default App3;